<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>标准模态框弹出提示</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="assets/i/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
  <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="assets/css/amazeui.min.css">
  <link rel="stylesheet" href="assets/css/app.css">
</head>
<body>

  <br /></br />
  <button type="button" class="am-btn am-btn-primary" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 400, height: 225}">
    弹出一些提示内容
  </button>

  <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
    <div class="am-modal-dialog">
      <div class="am-modal-hd">Modal 标题
        <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
      </div>
      <div class="am-modal-bd">
        Modal 内容。本 Modal 无法通过遮罩层关闭。
      </div>
    </div>
  </div>


  <button type="button" class="am-btn am-btn-primary" data-am-modal="{target: '#my-alert'}">
    Alert提示
  </button>

  <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
    <div class="am-modal-dialog">
      <div class="am-modal-hd">标题</div>
      <div class="am-modal-bd">
        内容
      </div>
      <div class="am-modal-footer">
        <span class="am-modal-btn">确定</span>
      </div>
    </div>
  </div>


  <button type="button" class="am-btn am-btn-warning" id="doc-confirm-toggle">
    删除提示
  </button>

  <div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
    <div class="am-modal-dialog">
      <div class="am-modal-hd">提示内容</div>
      <div class="am-modal-bd">
        你，确定要删除这条记录吗？
      </div>
      <div class="am-modal-footer">
        <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      </div>
    </div>
  </div>


  <button type="button" class="am-btn am-btn-success" id="doc-prompt-toggle">
    输出提示框
  </button>

  <div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
    <div class="am-modal-dialog">
      <div class="am-modal-hd">标题</div>
      <div class="am-modal-bd">
        来来来，吐槽点啥吧
        <input type="text" class="am-modal-prompt-input">
      </div>
      <div class="am-modal-footer">
        <span class="am-modal-btn" data-am-modal-cancel>取消</span>
        <span class="am-modal-btn" data-am-modal-confirm>提交</span>
      </div>
    </div>
  </div>



  <button id="np-s" class="am-btn am-btn-primary">顶部进度条</button>
  <button id="np-d" class="am-btn am-btn-success">进度条走完</button>





  <!--[if (gte IE 9)|!(IE)]><!-->
  <script src="assets/js/jquery.min.js"></script>
  <!--<![endif]-->
  <!--[if lte IE 8 ]>
  <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
  <script src="assets/js/amazeui.ie8polyfill.min.js"></script>
  <![endif]-->
  <script src="assets/js/amazeui.min.js"></script>


  <script type="text/javascript">
  //删除提示处理，要放到调用的js库下面
  $(document).ready(function(){
    $('#doc-confirm-toggle').click(function() {
      $('#my-confirm').modal({
        relatedTarget: this,
        onConfirm: function(options) {
          //删除处理
        },
        // closeOnConfirm: false,
        onCancel: function() {
          //未删除处理
        }
      });
    });


    //提交框处理
    $('#doc-prompt-toggle').on('click', function() {
        $('#my-prompt').modal({
          relatedTarget: this,
          onConfirm: function(e) {
            //提交处理
            alert('你输入的是：' + e.data || '')
          },
          onCancel: function(e) {
            //未提交处理
          }
        });
      });

    });

    //顶部进度条
    $(function(){
      var progress = $.AMUI.progress;
      //实际上这里使用异步加载方式处理完成问题
      $('#np-s').on('click', function() {
        progress.start();
      });

      $('#np-d').on('click', function() {
        progress.done();
      });
    });
  
  
  </script>
</body>
</html>